import './E2.css';
import React from 'react';
import { Button,input ,Col,Row} from 'antd';

class E2 extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            inputValue:"",
        }
        }


    handleBtnClick=(e)=> {
        console.log(e.target.innerText);
        let suffer = "";
        switch (e.target.innerText) {

            case "+":
                    suffer = " " + e.target.innerText + " ";
                    break;
            case "-":
                suffer = " " + e.target.innerText + " ";
                break;
            case "*":
                suffer = " " + e.target.innerText + " ";
                break;
            case "/":
                suffer = " " + e.target.innerText + " ";
                break;
            case "=":
                suffer = " " + e.target.innerText;
                let a = [];
                let b = [];
                let sum = 0;
                a = this.state.inputValue.split(" ");
                //124+14*433-355+35/42=
                //b:124 +14 yudao * 则 +14*433 -355 +35/42
                for (let i = 0; i < a.length; i++) {
                    if (a[i] !== "+" && a[i] !== "-" && a[i] !== "*" && a[i] !== "/") {
                        b.push(a[i++]);

                    }
                    if (a[i] === "+") {
                        b.push(a[i+1]);
                        i++;
                    }
                    if (a[i] === "-") {
                        b.push(-a[i + 1]);
                        i++;
                    }
                    if (a[i] === "*") {

                        let t=b.pop();
                        b.push(t * a[i + 1]);
                        i++;
                    }
                    if (a[i] === "/") {
                        let t=b.pop();
                        b.push(t /a[i + 1]);
                        i++;
                    }

                }

                for (let i = 0; i < b.length; i++) {
                    let tem = parseInt(b[i]);
                    sum += tem;
                }
                console.log(b.length);
                suffer = suffer + sum;
                break;
            default:
                suffer = e.target.innerText;
                break;
        }

        this.setState({inputValue:this.state.inputValue+suffer});

    }
    ac=(e)=>{
        this.setState({inputValue:""});
    }
    back=()=>{
        if(this.state.inputValue[this.state.inputValue.length-1]==" "){
            this.setState({inputValue:this.state.inputValue.substr(0,this.state.inputValue.length-3)});
        }
        else {

            this.setState({inputValue: this.state.inputValue.substr(0, this.state.inputValue.length - 1)});
        }
    }
    history=()=>{

        let oldHistory = [];
         oldHistory = JSON.parse(localStorage.getItem("history") || {});
         oldHistory.push(this.state.inputValue);
         localStorage.setItem("history", JSON.stringify(oldHistory));
    }


render(){
    const {inputValue}=this.state;
    return (
      <div className="Main">
       <Row>
          <Col xs={0} sm={4} md={6} lg={4}></Col>
          <Col xs={24} sm={16} md={12} lg={16}>
            <div id="val_all">
              <div id="row1">
                <input className="inputArea" value={inputValue} style={{height:80}}/>
              </div>
              <div id="row2">
                <Button className="btn1" style={{height:50}} onClick={this.ac}>AC</Button>
                <Button className="btn1" style={{height:50}} onClick={this.back}>BACK</Button>
                <Button className="btn1" style={{height:50}} >%</Button>
                <Button className="btn2" onClick={this.handleBtnClick} style={{height:50}} >/</Button>
              </div>
              <div  id="row3">
                <Button className="btn1" onClick={this.handleBtnClick} style={{height:50}} >1</Button>
                <Button className="btn1" onClick={this.handleBtnClick} style={{height:50}} >2</Button>
                <Button className="btn1" onClick={this.handleBtnClick} style={{height:50}} >3</Button>
                <Button className="btn2" onClick={this.handleBtnClick} style={{height:50}} >*</Button>
              </div>
              <div id="row4">
                <Button className="btn1" onClick={this.handleBtnClick} style={{height:50}} >4</Button>
                <Button className="btn1" onClick={this.handleBtnClick} style={{height:50}} >5</Button>
                <Button className="btn1" onClick={this.handleBtnClick} style={{height:50}} >6</Button>
                <Button className="btn2" onClick={this.handleBtnClick} style={{height:50}} >+</Button>
              </div>
              <div id="row5">
                <Button className="btn1" onClick={this.handleBtnClick} style={{height:50}} >7</Button>
                <Button className="btn1" onClick={this.handleBtnClick} style={{height:50}} >8</Button>
                <Button className="btn1" onClick={this.handleBtnClick} style={{height:50}} >9</Button>
                <Button className="btn2" onClick={this.handleBtnClick} style={{height:50}} >-</Button>
              </div>
              <div id="row6">
                <Button className="btn4" onClick={this.handleBtnClick} style={{height:50}} >0</Button>
                <Button className="btn1" onClick={this.handleBtnClick} style={{height:50}} >.</Button>
                <Button className="btn2" onClick={this.handleBtnClick} style={{height:50}} >=</Button>
              </div>
              <div id="row7">
                <Button className="btn3" onClick={this.history()} style={{height:50}} >history</Button>
              </div>
            </div>
          </Col>
          <Col xs={0} sm={4} md={6} lg={4}></Col>
       </Row>
      </div>
    );
}
}


export default E2;
